<template>
  <div class="rightTwo">
    <div>
      <moduleTitle :name="title"></moduleTitle>
      <div class="paihang">
        <!--            <div id="3Decharts"></div>-->
        <div
          class="paihang-box"
          style="background-color: rgba(56, 234, 244, 0.2); width: 90%;"
        >
          <div class="pai-boximg" style="padding: 0 0.34vw 0 0.3208vw;">
            <div class="pai-boximg-l">
              <div class="pai-boximg-l-l">序号</div>
              <div class="pai-boximg-l-r">服务名称</div>
            </div>
            <div class="pai-boximg-r">调用次数</div>
          </div>
        </div>

        <template v-for="(item, index) in paihang">
          <div
            class="paihang-box"
            :key="index"
            v-if="index < 4"
            style="height: 3.2407vh;"
          >
            <div class="pai-boximg2">
              <div class="pai-boximg-inofo">
                <div
                  class="pai-num"
                  :style="{ backgroundColor: getColorByIndex(index) }"
                >
                  <!-- <img :src="paihangList[index].url" alt="" /> -->
                  <div class="pai-numimgbox">
                    {{ '0' + (index * 1 + 1) }}
                  </div>
                </div>
              </div>
              <!-- <div class="pai-boximg-du"></div> -->
              <div class="pai-boximg-du-l">
                <div class="pai-title">
                  <div class="pai-name" :title="item.api_name">
                    {{ item.api_name }}
                  </div>
                  <div class="pai-boximg-du-r">{{ item.callCount }}次</div>
                </div>
                <div>
                  <el-progress
                    :text-inside="true"
                    :show-text="false"
                    define-back-color="rgba(56, 234, 244, 0.2)"
                    :percentage="
                      item.percentage * 100 > 100 ? 100 : item.percentage * 100
                    "
                    :stroke-width="5"
                    status="exception"
                  >
                  </el-progress>
                </div>
                <div
                  class="jindu"
                  :style="{
                    position: 'absolute',
                    top: '90%',
                    left:
                      item.percentage * 100 > 100
                        ? 100 + '%'
                        : item.percentage * 100 + 3 + '%',
                    transform: 'translateY(-50%) translateX(-50%)'
                  }"
                >
                  <img src="@/assets/newDashboard/进度.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import moduleTitle from '@/components/moduleTitle'

export default {
  name: 'SdssJddsZhgjWebRightTwo',
  components: {
    moduleTitle
  },
  props: {
    propstow: Array
  },
  data() {
    return {
      title: '服务调用排行',
      paihangList: [
        {
          url: require('@/assets/index/1.png'),
          value: '1230',
          color: '#62c400',
          name: '登录用户数',
          percentage: 100
        },
        {
          url: require('@/assets/index/2.png'),
          value: '1228',
          color: '#3478ff',
          name: '项目实施进度情况',
          percentage: 68
        },
        {
          url: require('@/assets/index/3.png'),
          value: '1202',
          color: '#3478ff',
          name: '按区域统计水库数量',
          percentage: 64
        },
        {
          url: require('@/assets/index/4.png'),
          value: '1181',
          color: '#3478ff',
          name: '按类型统计水库数量',
          percentage: 50
        }
      ],
      paihang: []
    }
  },
  created() {},
  watch: {
    propstow: {
      immediate: true,
      deep: true,
      handler: function (newarr, olbarr) {
        if (newarr) {
          this.paihang = newarr
          this.getBaseInfo()
        }
      }
    }
  },
  mounted() {},
  beforeDestroy() {},

  methods: {
    getBaseInfo() {
      this.percentage = 0
      let all = 0
      this.paihang.forEach((item) => {
        all += item.callCount * 1
      })

      this.paihang.forEach((item) => {
        item.percentage = (item.callCount / all) * 4
      })
      this.paihang[0].percentage = 100
    },
    getColorByIndex(index) {
      return index === 0
        ? '#FF302C'
        : index === 1
        ? '#00BE92'
        : index === 2
        ? '#FF8A00'
        : '#158BCD'
    }
  }
}
</script>

<style lang="scss">
.rightTwo {
  width: 100%;
  height: 40%;
  // background-color: blue;
}

.paihang {
  height: 100%;
  width: 100%;
  .el-progress-bar__inner {
    background-color: unset;
    background: linear-gradient(
      90deg,
      #00f6ff 0%,
      rgba(1, 192, 247) 100%
    ) !important;
    // background-image: linear-gradient(to right, #6dd6f8, #6d9df8) !important;
  }
  .el-progress {
    width: 95%;
    margin-left: 1.0417vw;
    margin-top: 0.2604vw;
  }
}

.paihang-box {
  height: 2.7778vh;
  width: 93%;
  position: relative;
  margin: 0.463vh auto 0;
  margin-top: 0.5208vw;
  color: #fff;
}

.paihang-box img {
  width: 100%;
  height: 3.3333vh;
}

.pai-boximg {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7292vw;
  color: #ffffff;
  padding: 0 0.813vw 0 0.6667vw;
}

.pai-boximg-l {
  display: flex;
  align-items: center;
}

.pai-boximg-l-r {
  margin-left: 2.1667vw;
}

.pai-boximg2 {
  padding: 0 0.604vw 0 0.5208vw;
  display: flex;
  align-items: center;
}

.pai-boximg-inofo {
  display: flex;
  align-items: center;
  // width: 50%;
}

.pai-num {
  height: 3.2407vh;
  width: 1.8229vw;
  line-height: 3.7037vh;
  text-align: center;
  color: #fff;
  margin-top: 0.5208vw;
  position: relative;
}

.pai-num img {
  height: 2.7778vh;
  width: 2.2396vw;
}

.pai-numimgbox {
  position: absolute;
  width: 100%;
  height: 100%;
  left: -5%;
  top: 5%;
  text-align: center;
  line-height: 2.7778vh;
  padding-left: 0.2604vw;
  font-size: 0.9896vw;
  font-family: DINPro;
  font-weight: 500;
  color: #ffffff;
}

.pai-name {
  margin-left: 1.5208vw;
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  width: 14vw;
}

.pai-boximg-du {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pai-boximg-du-l {
  width: 100%;
  position: relative;
}
.jindu {
  width: 1.8229vw;
  height: 3.2407vh;

  img {
    width: 100%;
    height: 100%;
  }
}
.pai-boximg-du-r {
  width: 30%;
  white-space: nowrap;
  text-align: right;
  font-size: 0.7813vw;
  font-family: DINPro;
  font-weight: 400;
  color: #ffffff;
}
.pai-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7292vw;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
</style>
